import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/constants/font_family.dart';
import 'package:flutter_eve_plugin/constants/font_weight.dart';
import 'package:flutter_eve_plugin/route/main.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class CheckpointStartGameFooterWidget extends StatefulWidget {
  const CheckpointStartGameFooterWidget({
    Key key,
  }) : super(key: key);

  _CheckpointStartGameFooterWidgetState createState() =>
      _CheckpointStartGameFooterWidgetState();
}

class _CheckpointStartGameFooterWidgetState
    extends State<CheckpointStartGameFooterWidget>
    with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  initState() {
    super.initState();

    ///300秒
    controller =
        AnimationController(duration: const Duration(seconds: 30), vsync: this);
    animation = Tween(begin: -190.0, end: 0.0).animate(controller)
      ..addListener(() {
        setState(() => {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          Navigator.pushNamedAndRemoveUntil(
              context,
              RouteConstant.CheckpointSuccPage,
              ModalRoute.withName(RouteConstant.CheckpointRankPage));
        }
      });
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(onInit: (store) {
      //结束了剧情触发,开始动画
      controller.forward();
    }, converter: (store) {
      return AppStateViewModel(state: store.state);
    }, builder: (context, vm) {
      return Container(
        width: setRatio(375),
        height: setRatio(70),
        margin: EdgeInsets.only(top: setRatio(91)),
        decoration: BoxDecoration(color: Color(0x8F000000)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Stack(
              children: <Widget>[
                Image.asset(
                  imageUtilYeXiu(
                      'checkpoint/icon_checkpoint_start_game_qjs@3x'),
                  width: setRatio(300),
                  height: setRatio(20),
                  fit: BoxFit.fill,
                ),
                Positioned(
                  left: setRatio(59),
                  child: Container(
                    width: setRatio(190),
                    height: setRatio(20),
                    child: Stack(
                      children: <Widget>[
                        Positioned(
                          left: setRatio(animation.value),
                          child: Image.asset(
                            imageUtilYeXiu(
                                'checkpoint/icon_checkpoint_start_game_qjs_progress@3x'),
                            width: setRatio(190),
                            height: setRatio(20),
                            fit: BoxFit.fitHeight,
                          ),
                        ),
                        Image.asset(
                          imageUtilYeXiu(
                              'checkpoint/icon_checkpoint_start_game_qjs_progress_foreground@3x'),
                          width: setRatio(190),
                          height: setRatio(20),
                          fit: BoxFit.fitHeight,
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
            SizedBox(
              height: setRatio(8),
            ),
            Text(
              '请等待结果, 即将公布...',
              style: TextStyle(
                  decoration: TextDecoration.none,
                  color: Color(0xaFFFFFFF),
                  fontFamily: FontFamily.PINGFANG,
                  fontWeight: FontWeightCustom.PF_Medium,
                  fontSize: setTextSp(13)),
            )
          ],
        ),
      );
    });
  }
}
